<script lang="ts" setup>
import { getAvatar } from '@/api/system/users/index'

const props = withDefaults(defineProps<{
    url: string,
    size?: number
}>(), {
    url: '',
    size: 32
})
const avatarUrl = ref()

const errorHandler = () => true

async function getAvatarUrl() {
    const res = await getAvatar(props.url)
    avatarUrl.value = URL.createObjectURL(new Blob([res.data]))
}

onMounted(() => {
    getAvatarUrl()
})
</script>

<template>
    <ElAvatar :size="props.size" :src="avatarUrl" @error="errorHandler">
        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
    </ElAvatar>
</template>

<style scoped>
</style>